import React, { Suspense } from "react";
import { MainLayout, ErrorBoundary } from "@shared/pc";
import { withLazyLoad } from "@shared/pc";
import { Button, Spin } from "antd";
import { Route, Routes } from "react-router-dom";
import { globalData } from "@shared/utils"; 
// 使用联邦模块动态导入微应用路由
const MicroApp1Routes = withLazyLoad(() => import("microApp1/Routes"));
const MicroAppRoutes = withLazyLoad(() => import("microApp/Routes"));
const AppLayout: React.FC = () => {
  return (
    <>
      <Button onClick={()=>{
        console.log(globalData.getItem('test'))
        globalData.setItem('test', '456')
      }}>修改数据</Button>
    <MainLayout
      RoutesComponent={
        <Routes>
          <Route
            path="/*"
            element={
              <ErrorBoundary>
                <Suspense fallback={<Spin size="large" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px' }} />}>
                  <MicroApp1Routes />
                  <MicroAppRoutes />
                </Suspense>
              </ErrorBoundary>
            }
          />
        </Routes>
      }
    />
    </>
  );
};

export default AppLayout;
